<template>
  <ul>
    <li>
      <select @click="choose">
        选项
        <option value="radio">单选</option>
        <option value="multi">多选</option>
      </select>
    </li>
    <li class="table">
      <template v-if="select == 'multi'">
        <div class="tableData">全选</div>
        <input class="tableData" type="checkbox" @change="checkAll" :checked="checkedAll"/>
        <div class="tableData">反选</div>
        <input class="tableData" type="checkbox" @change="reverseAll" />
      </template>

      <div class="tableData">文章id</div>
      <div class="tableData">文章标题</div>
      <div class="tableData">文章内容</div>
      <div class="tableData">操作</div>
    </li>
    <li v-for="(item, index) in tableData" :key="index" class="table">
      <input
        class="tableData"
        type="checkbox"
        :value="item.article_id"
        @change="multipleChoice(index)"
        :checked="item.checked"
      />
      <div class="tableData">{{ item.article_id }}</div>
      <div class="tableData">{{ item.article_title }}</div>
      <div class="tableData">{{ item.article_content }}</div>
      <button class="tableData" @click="del(item.article_id)">删除</button>
    </li>
  </ul>
  <ul class="pagination">
    <li><button @click="up">上一页</button></li>
    <li
      v-for="(item, index) in NumberOfPages()"
      :key="index"
      @click="getList(item)"
      :class="+currentPage === item ? 'active' : ''"
    >
      {{ item }}
    </li>
    <li><button @click="down">下一页</button></li>
    <button @click="mulDel">批量删除</button>
  </ul>
  <ModelCom
    :isShow="isShow"
    @cancel="cancel"
    @confirm="confirm"
    title="提示"
    content="是否确认删除？"
  />
</template>
<script setup>
import { articleQuery, delArticle } from "../api/index";
import ModelCom from "../components/ModelCom.vue";
import { ref } from "vue";
let tableData = ref([]); //表格数据
let total = ref(""); //总条数
const pageSize = "10"; //文章条数
let currentPage = ref(1); //当前页
const isShow = ref(false); //是否显示弹窗
const Id = ref(null); //文章id
let select = ref("radio"); //默认为单选
let checkedAll = ref(false); //全选按钮

//查询文章信息
const getList = (pageNo) => {
  articleQuery({
    pageNo,
    pageSize,
  }).then((res) => {
    console.log(res);
    // tableData.value = res?.data?.list || [];
    const { list = [] } = res?.data || {};
    tableData.value = list.map((item) => {
      return { ...item, checked: false };
    });
    total.value = res?.data?.total || 0;
    currentPage.value = pageNo;
  });
};

//点击上一页
const up = () => {
  currentPage.value = currentPage.value - 1 >= 1 ? currentPage.value - 1 : 1;
  getList(currentPage.value);
};

//点击下一页
const down = () => {
  currentPage.value =
    currentPage.value + 1 <= NumberOfPages()
      ? currentPage.value + 1
      : NumberOfPages();
  getList(currentPage.value);
};

getList(currentPage.value);

//总页数
const NumberOfPages = () => {
  return Math.ceil(total.value / pageSize);
};

//删除文章信息
const del = (articleIds) => {
  isShow.value = true;
  Id.value = articleIds;
};

//取消删除
const cancel = () => {
  isShow.value = false;
};

//确定删除
const confirm = () => {
  isShow.value = false;
  delArticle({
    articleIds: Id.value.toString(),
  }).then((res) => {
    console.log(res);
    getList(currentPage.value);
  });
};

const choose = (e) => {
  const { value } = e.target;
  select.value = value;
  if(select.value == "radio"){
    tableData.value =  tableData.value.map(item => {
      return { ...item, checked: false };
    });
  }
};

//单选(思路：在获取到的接口数据中遍历数组，给每一项添加选中的值checked，默认为fasle。在复选框上绑定动态属性checked值为checked，通过这个checked值来做下面相应的处理。首选将点击的函数传入index值)
const multipleChoice = (index) => {
  // 因为这里没有使用双向绑定，所以选中的值不会改变，这边取反就可以拿到正确的选中值
 const checkedStart = !tableData.value[index].checked;
 // 当选项为单选的时候，就遍历整个数组，将数组的状态全部改为fasle，再把获取到正确的选中值状态赋值给当前选中的状态 
  if (select.value == "radio") {
   tableData.value =  tableData.value.map(item => {
      return { ...item, checked: false };
    });
    tableData.value[index].checked = checkedStart
  }else{
     tableData.value[index].checked = checkedStart
     //通过包含数组方法，当数组里的checked值都为true的时候赋值给checkedAll
     checkedAll.value =  tableData.value.every(item =>{ return item.checked})
  }
};

// 全选(思路：通过e.target.checked可以获取到全选按钮的点击状态，遍历整个数组，直接将获取到的状态转给数组。当下面的选中态全部选中的时候，全选按钮选中态也要选中)
const checkAll = (e) => {
   const {checked} = e.target;
    tableData.value =  tableData.value.map(item => {
      return { ...item, checked};
    });
};

// 反选(思路：遍历整个数组，将checked值每次取反)
const reverseAll = () => {
  tableData.value = tableData.value.map(item => {
      return { ...item, checked:!item.checked};
    });
};
// 批量删除(思路：声明一个新数组，用于接收选中的id，遍历整个数组。如果checked值为true，就将对应的id，push进新数组)
const mulDel = () => {
  const arr = [];
  tableData.value.forEach(element => {
    if(element.checked){
      arr.push(element.article_id)
    }
  });
  Id.value =  arr.join()
 if(arr.length){
   delArticle({
    articleIds: Id.value,
  }).then((res) => {
    console.log(res);
    getList(currentPage.value);
  });
 }
};
</script>

<style scoped>
.table {
  display: flex;
  height: 100%;
}

li {
  list-style: none;
  margin: 10px;
}

.tableData {
  flex: 1;
}

.pagination {
  display: flex;
  justify-content: center;
}

.active {
  background-color: aqua;
}
</style>
